let usernameStat = false;
let nicknameStat = false;
let passwordStat = false;
let phoneStat = false;
let checkNumStat = false;
let checkBoxStat = false;

let v = new Vue({
    el: 'body>div',
    data: function () {
        return {
            /*用户信息*/
            user: {username: '', nickname: '', password: '', phone: '', checkNum: '', checkBoxes: false},
            /*用户名验证*/
            setTips: {display: 'none'},
            usernameTips: '',
            setS1Icon: {display: 'none'},
            /*昵称验证*/
            nicknameTips: '',
            setS2Icon: {display: 'none'},
            /*密码验证*/
            setVisible: {display: 'none'},
            pwdType: 'password',
            pwdT1: {color: 'white'},
            passwordTips1: '',
            pwdT2: {color: 'white'},
            passwordTips2: '',
            pwdT3: {color: 'white'},
            passwordTips3: '',
            showANDHide: 'hide',
            pwdTipsIcon: 's3',
            pwdTips: {display: 'none'},
            /*手机号验证*/
            phoneTips: '',
            setS4Icon: {display: 'none'},
            /*验证码*/
            getCheckNum: '获取验证码',
            checkNumTips: '',
            getNumStyle: {cursor: 'pointer'},
            sets: false,
            /*注册按钮*/
            setRegBt:true,
            setRegBtStyle: {backgroundColor: '#BDCEFC', cursor: 'not-allowed'},
        };
    },
    methods: {
        /*用户名验证*/
        checkUsername() {
            v.setS1Icon = {display: 'none'};
            usernameStat = false;
            /*let username = v.user.username;*/
            v.user.username = v.user.username.replaceAll(' ', '');
            let username = v.user.username;
            let usernameLength = 0;
            for (let u of username) {
                if (u.match('^[\u4e00-\u9fa5]$')) {
                    usernameLength += 2;
                    continue;
                }
                usernameLength++;
            }
            if (usernameLength > 14) {
                v.usernameTips = '用户名不能超过7个中文或14个字符';
                return;
            }
            if (username == null || username == '') {
                v.usernameTips = '用户名不能为空!';
                return;
            }
            if (!isNaN(username) || !username.match('^[a-zA-Z0-9_\u4e00-\u9fa5]+$')) {
                v.usernameTips = '用户名仅支持中英文、数字和下划线,且不能为纯数字';
                return;
            }
            axios.get("/user/checkUsername?username=" + v.user.username).then(function (response) {
                if (response.data == 0) {
                    v.usernameTips = '';
                    v.setS1Icon = {display: 'block'};
                    usernameStat = true;
                    v.checks();
                    return;
                } else {
                    v.usernameTips = '此用户名太受欢迎,请更换一个!';
                }
            });

        },
        /*昵称验证*/
        checkNickname() {
            v.setS2Icon = {display: 'none'};
            nicknameStat = false;
            let nickname = v.user.nickname;
            if (nickname == null || nickname == '') {
                v.nicknameTips = '昵称不能为空!';
                return;
            }
            if (nickname.length > 14) {
                v.nicknameTips = '昵称最长只能为14个字符';
                return;
            }
            if (!nickname.match('^[a-zA-Z0-9_\u4e00-\u9fa5]+$')) {
                v.nicknameTips = '昵称只能为中英文、数字或下划线';
                return;
            }
            nicknameStat = true;
            v.nicknameTips = '';
            v.setS2Icon = {display: 'block'};
            v.checks();

        },
        /*密码验证*/
        checkPassword() {
            v.pwdTipsIcon = 's3';
            passwordStat = false;
            let errorSrc = 'img/reg_img/pwd-error.png';
            let rightSrc = 'img/reg_img/pwd-right.png';
            v.user.password = v.user.password.replaceAll(' ', '');
            let password = v.user.password;
            let num = 0;//校验规则计数
            if (password == null && password == '') {
                v.pwdT1.color = 'white';
                v.pwdT2.color = 'white';
                v.pwdT3.color = 'white';
                v.passwordTips1 = '';
                v.passwordTips2 = '';
                v.passwordTips3 = '';
                return;
            }
            v.setVisible.display = 'block';
            if (password.length >= 8 && password.length <= 14) {
                v.pwdT1.color = 'white';
                v.passwordTips1 = rightSrc;
                num++;
            } else {
                v.pwdT1.color = 'red';
                v.passwordTips1 = errorSrc;
            }
            if (password.match('((?=.*\\d)(?=.*\\D)|(?=.*[a-zA-Z])(?=.*[^a-zA-Z]))')) {
                v.pwdT2.color = 'white';
                v.passwordTips2 = rightSrc;
                num++;
            } else {
                v.pwdT2.color = 'red';
                v.passwordTips2 = errorSrc;
            }
            if (!password.match('[\u4e00-\u9fa5 ]+')) {
                v.pwdT3.color = 'white';
                v.passwordTips3 = rightSrc;
                num++;
            } else {
                v.pwdT3.color = 'red';
                v.passwordTips3 = errorSrc;
            }
            if (num == 3) {
                v.pwdTips.display = 'none';
                v.pwdTipsIcon = 's3success';
                passwordStat = true;
                v.checks();
            }
        },
        /*设置查看密码与隐藏密码的转换*/
        setPwdSVG() {
            if (v.showANDHide == 'hide') {
                v.showANDHide = 'show';
                v.pwdType = 'text';
            } else {
                v.showANDHide = 'hide';
                v.pwdType = 'password';
            }
        },
        /*设置密码提示框的显示与隐藏*/
        setPwdVisible() {
            if (v.pwdTips.display == 'block') {
                v.pwdTips.display = 'none';
            } else {
                v.pwdTips.display = 'block';
            }
            /*                v.pwdTips.display == 'block' ? 'none' : 'block';   */
        },
        /*手机号验证*/
        checkPhone() {
            v.setS4Icon.display = 'none';
            phoneStat = false;
            let phone = v.user.phone;
            if (!phone.match('^1(3\\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\\d|9[0-35-9])\\d{8}$')) {
                v.phoneTips = '手机号格式不正确!';
                return;
            }
            axios.get("/user/checkPhone?phone=" + v.user.phone).then(function (response) {
                if (response.data == 1) {
                    v.phoneTips = '该手机号已注册!';
                    return;
                }
                v.setS4Icon.display = 'block';
                v.phoneTips = '';
                phoneStat = true;
                v.checks();
            });

        },
        /*校验验证码*/
        checkNums() {
            let checkNum = v.user.checkNum;
            if (checkNum != null && checkNum!= '') {
                checkNumStat = true;
                v.checks();
            }
        },
        /*获取验证码*/
        getCM() {
            if (phoneStat != true) {
                v.phoneTips = '手机号格式不正确!';
                return;
            }
            axios.post("/user/getCheckNum", v.user.phone).then(function (response) {
                if (response.data == 0) {
                    v.checkNumTips = "短信激活码已发送,请您在30分钟内填写。<a href='/index.html'>无法获取?</a>";
                    let s = 60;
                    v.getNumStyle = {cursor: 'not-allowed'};
                    v.sets = true;
                    let time = setInterval(function () {
                        s--;
                        if (s == 0) {
                            v.sets = false;
                            v.getNumStyle = {cursor: 'pointer'};
                            v.getCheckNum = '获取验证码'
                            clearInterval(time);
                        }
                        v.getCheckNum = '重发验证（' + s + '）';
                    }, 1000);
                }else if (response.data == 1) {
                    v.phoneTips = '手机号已注册!';
                }else if (response.data == 2) {
                    v.phoneTips = '手机号格式不正确!';
                }
            });

        },
        checked() {
            if (event.target.checked) {
                v.user.checkBoxes = true;
                checkBoxStat = true;
                v.checks();
                return;
            }
            v.user.checkBoxes = false;
            checkBoxStat = false;

        },
        reg() {
            axios.post("/user/regUser", v.user).then(function (response) {
                if (response.data == 0) {
                    v.$message.success("注册成功!");
                    //可以换成直接登录
                    location.href = '/index.html';
                }else {
                    switch (response.data) {
                        case 100:
                            v.usernameTips = '用户名不能为空!';
                            break;
                        case 101:
                            v.usernameTips = '用户名已注册!';
                            break;
                        case 200:
                            v.phoneTips = '手机号格式不正确!';
                            break;
                        case 201:
                            v.phoneTips = '手机号已注册!';
                            break;
                        case 300:
                            v.$alert("请阅读并勾选用户协议!");
                            break;
                        case 400:
                            v.checkNumTips = '<p style="color: red;margin-top: 2px"> 验证码错误!</p>';
                            break;


                    }
                }
                /*{
                    v.checkNumTips = '<p style="color: red;margin-top: 2px"> 验证码错误!</p>';
                }*/
            });
        },
        checks() {
            if (usernameStat == true &&
                nicknameStat == true &&
                passwordStat == true &&
                phoneStat == true &&
                checkNumStat == true &&
                checkBoxStat == true) {
                v.setRegBt = false;
                v.setRegBtStyle = {backgroundColor: '#2e58ff', cursor: 'pointer'};
            } else {
                v.setRegBt = true;
                v.setRegBtStyle = {backgroundColor: '#BDCEFC', cursor: 'not-allowed'};
            }
        }

    },

})